<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .login-form{
            margin-top: 20vh;
        }
    </style>
</head>
<body>

    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs-4"></div>
            <div class="layui-col-xs-4">
                <form class="layui-form login-form" >
                    @csrf
                    <div class="layui-form-item">
                      <label class="layui-form-label">用户名：</label>
                      <div class="layui-input-block">
                        <input type="text" id="username" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">密 &nbsp;&nbsp;码：</label>
                      <div class="layui-input-block">
                        <input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                      </div>
                    </div>

                    <div class="layui-form-item">
                      <label class="layui-form-label">验证码：</label>
                      <div class="layui-input-block">
                        <input type="text" style="width:100px;display:inline-block;" class="layui-input">
                        <img src="/captcha" id="captcha" onclick="reload_captcha()" alt="请输入此验证码" style="margin-left:10px;width:100px;height:38px;">
                      </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                          <button class="layui-btn" onclick="doLogin()" lay-submit="" lay-filter="demo1">登陆</button>
                        </div>
                      </div>
                </form>
            </div>
            <div class="layui-col-xs-4"></div>
        </div>
    </div>

</body>

<script src="/layui/layui.js"></script>
{{-- <script src="/layui/jquery.min.js"></script> --}}

<script>
    layui.use(['layer'], function(){
        $=layui.jquery;
    })

    function reload_captcha(){
        $("#captcha").attr('src','/captcha?rand='+ Math.random());

    }

    function doLogin(){
        var uname=$("#username").val();
        var pword=$("#password").val();
        var vcode=$("#vcode").val();
        var token=$('input[name="_token"]').val();
        $.post('/dologin',{username:uname,password:pword,vcode:vcode,_token:token},function(res){
            if(res.code>1){
               return layer.alert(res.msg,{icon:2});
            }
        },'json');
    }
</script>
</html>
